﻿@{
    ViewBag.Title = "Index";
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>
</title>
    
    <script type="text/javascript">
        $(function () {
            $(window).resize(function () {
                $('#grid').datagrid('resize', {
                    width: $(window).width() - 10,
                    height: $(window).height() - 25
                }).datagrid('resize', {
                    width: $(window).width() - 10,
                    height: $(window).height() - 25
                });
            });

        });
        $(function () {
            initTable();
            Add();
            BindUpdate();
            Delete();
        }

            )
        function initTable() {
            $("#grid").datagrid({
                url: '/Modules/GetAll',
                title: "菜单管理",
                iconCls: 'icon-save',
                //width: function(){return document.body.clientWidth*0.9;},
                //height: 550,
                //fit:true,
                height: ($(window).height() * 0.98),
                nowrap: true,
                autoRowHeight: false,
                fitColumns: true,
                striped: true,
                collapsible: true,
                pagination: true,
                rownumbers: true,
                sortName: 'MID',
                sortOrder: 'desc',
                remoteSort: false,
                idField: 'MID',
                pageSize: 15,
                pageList: [15, 20, 30, 40, 50],
                striped: true, //奇偶行是否区分
                singleSelect: true,//单选模式
                rownumbers: true,//行号
                frozenColumns: [[
                    { title: 'MID', field: 'MID', width: 50, sortable: true },
                    { title: '用户名', field: 'ModuleName', width: 100, sortable: false },
                    { title: '模块链接', field: 'ModuleLinkUrl', width: 150, sortable: false },
                    { title: '图标', field: 'ModuleIcon', width: 100, sortable: false },
                    { title: '父菜单ID', field: 'ParentID', width: 100, sortable: false },
                    { title: '启用', field: 'IsVisible', width: 100, sortable: false },
                    { title: 'IsLeaf', field: 'IsLeaf', width: 100, sortable: false },
                    { title: 'IsMenu', field: 'IsMenu', width: 100, sortable: false },
                    { title: 'ModuleController', field: 'ModuleController', width: 100, sortable: false },
                ]],
                toolbar: [//工具栏
                    {
                        id: 'btnadd',
                        text: '添加',
                        iconCls: 'icon-add',

                        handler: function () {
                            $('#DivAdd').dialog('open');//直接弹出添加窗口
                        }
                    }, {
                        id: 'btncut',
                        text: '修改',

                        iconCls: 'icon-cut',
                        handler: function () {
                            ShowUpdataDia();//直接绑定弹出修改窗口事件
                        }
                    }, {
                        id: 'btndelete',
                        text: '删除',
                        iconCls: 'icon-cancel',
                    }],
            }
          )
        }
        //添加事件
        function Add() {
            $("#btnAdd").click(function () {
                
                var validate = $("#formAdd").form('validate');
                if (!validate ) {
                    alert('aaaaaaa');
                    return false;
                }
                //获取参数传递给前台
                var postData = $("#formAdd").serializeArray();
                //alert(postData);
                //发送异步请求到后台保存用户数据
                $.post("/Modules/Add", postData, function (data) {
                    if (data = "OK") {
                        //添加成功  1.关闭弹出层，2.刷新DataGird
                        $.messager.alert('提示消息', '添加成功!');
                        $("#DivAdd").dialog("close");
                        $("#grid").datagrid("reload");
                        $("#formAdd").form("clear");
                    }
                    else {
                        $.messager.alert('提示消息', '添加失败!');
                    }
                });
            });
        }
        //弹出修改框
        function ShowUpdataDia(browse) {
            var rows = $("#grid").datagrid("getSelections");
            if (rows.length != 1) {
                $.messager.alert("友情提示", "每次只能修改/浏览一条，你已经选择了<font color='red'  size='6'>" + rows.length + "</font>条", "error");
                return;
            }
            if (browse == null) {
                //处理修改的信息，弹出修改的对话框,然后显示选择的用户的详细信息
                $("#DivUpdate").dialog('open').dialog('setTitle', '修改信息');
                //绑定修改显示详细信息的方法
                
                BindShowUpdateInfo();
            }
            else {
                //处理浏览的信息，弹出浏览狂，然后显示浏览信息的相信信息
                $("#DivBrowerUser").dialog('open').dialog('setTitle', '浏览信息');
                //绑定用户的浏览信息
                BindBrowerUserInfo();
            }
        }
        //绑定弹出的修改界面
        function BindShowUpdateInfo() {
            //首先用户发送一个异步请求去后台实现方法
            var mid = $("#grid").datagrid("getSelections")[0].MID;  //获取到了用用户选择的ID
            $.get("/Modules/GetInfo", { id: mid }, function (Info) {
                $('#ffupdate').form('load', Info);
            });
        }
        //修改
        function BindUpdate() {
            $("#btnUpdate").click(function () {
                //首先也是对用户进行检测
                var validate = $("#ffUpdate").form("validate");
                if (validate == false) {
                    return false;
                }
                //构造参数发送给后台
                var posData = $("#ffupdate").serializeArray();
                $.post("/Modules/Update", posData, function (date) {
                    if (date == "OK") {
                        //修改成功，关闭弹出层，刷新DataGird
                        $.messager.alert("友情提示", "修改成功");
                        $("#DivUpdate").dialog('close');
                        $("#grid").datagrid("reload");
                    }
                    else {
                        $.messager.alert("友情提示", "修改失败，请您检查");
                    }
                })
            });
        }

        //删除
        function Delete() {
            $("#btndelete").click(function () {
                var rows = $("#grid").datagrid("getSelections");
                if (rows.length != 1) {
                    $.messager.alert("友情提示", "每次只能删除一条，你已经选择了<font color='red'  size='6'>" + rows.length + "</font>条", "error");
                    return;
                }
                $.messager.confirm("删除确认", "您确认删除?", function (r) {
                    if (r) {
                        var id = $("#grid").datagrid("getSelections")[0].MID;
                        $.post("/Modules/Delete", { id: id }, function (data) {
                            if (data == "OK") {
                                //修改成功，关闭弹出层，刷新DataGird
                                $.messager.alert("友情提示", "删除成功！" );
                                $("#DivUpdate").dialog('close');
                                $("#grid").datagrid("reload");
                            }
                            else {
                                $.messager.alert("友情提示", "删除失败：" + data);
                            }
                        })
                    }
                })
            });
        }
    </script>
    

</head>
<body>
    <div>
        <table id="grid" style="width: auto;height:400px " title="用户操作" iconcls="icon-edit"></table>
    </div>
    <!--------------------------添加用户信息的弹出层---------------------------->

    <div id="DivAdd" class="easyui-dialog" title="添加模块(菜单)" style="width:580px;height:300px;padding:10px 20px"
         closed="true" resizable="true" modal="true" buttons="#dlg-buttons">

        <form id="formAdd" method="post" novalidate="novalidate">
            <fieldset>
                <legend>模块信息</legend>
                <table id="tblAdd">
                    <tr>
                        <td><label for="ModuleName">模块名字：</label></td>
                        <td>
                            <input type="text" class="easyui-validatebox" id="ModuleName" name="ModuleName" data-options="required:true,validType:'length[1,30]'" />
                        </td>
                    </tr>
                    <tr>
                        <td> <label for="ModuleLinkUrl">模块链接:</label></td>
                        <td>
                            <input type="text" name="ModuleLinkUrl" style="width:184px" />
                        </td>
                    </tr>
                    <tr>
                        <td><label for="ParentID">父菜单ID：</label></td>
                        <td>
                            <input type="text" name="ParentID"   />
                        </td>
                    </tr>
                    <tr>
                        <td><label for="IsVisible">是否启用：</label></td>
                        <td>
                            <input type="checkbox" name="IsVisible" value="true"  />
                        </td>
                    </tr>
                    <tr>
                        <td><label for="IsLeaf">是否叶子：</label></td>
                        <td>
                            <input type="checkbox" name="IsLeaf" value="true"/>
                        </td>
                    </tr>
                    <tr>
                        <td><label for="IsMenu">是否菜单：</label></td>
                        <td>
                            <input type="checkbox" name="IsMenu" value="true" />
                        </td>
                    </tr>
                    <tr>
                        <td><label for="ModuleController">控制器名：</label></td>
                        <td>
                            <input class ="easyui-validatebox" type="text" name="ModuleController" data-options="validType:'length[1,30]'" />
                        </td>
                    </tr>
                </table>
            </fieldset>
            <br />
            <a href="javascript:void(0)" class="easyui-linkbutton" id="btnAdd" iconcls="icon-ok" >新增</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript: $('#DivAdd').dialog('close')">关闭</a>
        </form>
    </div>

    <div id="DivUpdate" class="easyui-dialog" title="修改菜单" style="width:580px;height:300px;padding:10px 20px"
         closed="true" resizable="true" modal="true" buttons="#dlg-buttons">

        <form id="ffupdate" method="post" novalidate="novalidate">
            <fieldset>
                <legend>修改菜单</legend>
                <table id="tblUpdata">
                    <tr>
                        <td><label for="ModuleName">模块名字：</label></td>
                        <td>
                            <input type="hidden" id="MID" name="MID" />
                            <input type="text" class="easyui-validatebox" id="ModuleName" name="ModuleName" data-options="required:true,validType:'length[1,30]'" />
                        </td>
                    </tr>
                    <tr>
                        <td> <label for="ModuleLinkUrl">模块链接:</label></td>
                        <td>
                            <input type="text" name="ModuleLinkUrl" style="width:184px" />
                        </td>
                    </tr>
                    <tr>
                        <td><label for="ParentID">父菜单ID：</label></td>
                        <td>
                            <input type="text" name="ParentID" />
                        </td>
                    </tr>
                    <tr>
                        <td><label for="IsVisible">是否启用：</label></td>
                        <td>
                            <input type="checkbox" name="IsVisible" value="true" />
                        </td>
                    </tr>
                    <tr>
                        <td><label for="IsLeaf">是否叶子：</label></td>
                        <td>
                            <input type="checkbox" name="IsLeaf" value="true" />
                        </td>
                    </tr>
                    <tr>
                        <td><label for="IsMenu">是否菜单：</label></td>
                        <td>
                            <input type="checkbox" name="IsMenu" value="true" />
                        </td>
                    </tr>
                    <tr>
                        <td><label for="ModuleController">控制器名：</label></td>
                        <td>
                            <input class="easyui-validatebox" type="text" name="ModuleController" data-options="validType:'length[1,30]'" />
                        </td>
                    </tr>
                </table>
            </fieldset>
            <br />
            <a href="javascript:void(0)" class="easyui-linkbutton" id="btnUpdate" iconcls="icon-ok">修改</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript: $('#DivUpdate').dialog('close')">关闭</a>
        </form>
    </div>
</body>
</html>
